<!--
 * @FileDescription 网页头部
 * @Author lz
 * @Date 20230314 10:17:08
 * @LastEditors lz
 * @LastEditTime 20230314 10:17:08
-->
<template>
    <div class="hdrBox">
        <div class="row_h_1">
            <!-- left -->
            <span class="text_1">Activities</span>
            <img src="/apoImg/fox_logo_s.png" class="fox_logo_s">
            <span class="text_2">Firefox Web Browser</span>
            <img src="/apoImg/xll.png" class="xll">

            <span class="tim">{{ state.currentTime }}</span>
            <!-- right -->
            <img src="/apoImg/more.png" class="more">
            <div class="guanbi" @click="retClick()">
                退出
            </div>
            <!-- <img src="/apoImg/guanbi.png" class="guanbi"> -->
            <img src="/apoImg/notice.png" class="notice">
            <img src="/apoImg/menu_zzjg.png" class="menu_zzjg">

        </div>
        <div class="row_h_2" v-show="HomeContent.Default.UBANTUVal.value == 1">
            <!-- left -->
            <div class="TabBox">
                <img src="/apoImg/ic_wq.png" class="ic_wq">
                <span class="text_3">Dreamview</span>
                <img src="/apoImg/ic_rong.png" class="ic_rong">
            </div>
            <!-- right -->
            <img src="/apoImg/ic_add.png" class="ic_add">

            <img src="/apoImg/close.png" class="close" @click="ret()">
            <img src="/apoImg/fangda.png" class="fangda">
            <img src="/apoImg/suoxiao.png" class="suoxiao">
        </div>
        <div class="row_h_3" v-show="HomeContent.Default.UBANTUVal.value == 1">
            <img src="/apoImg/ic_jianl.png" class="ic_jianl">
            <img src="/apoImg/ic_jianr.png" class="ic_jianr">
            <img src="/apoImg/ic_shx.png" class="ic_shx">

            <div class="con_box">
                <img src="/apoImg/anquan.png" class="anquan">
                <a-input v-model:value="HomeContent.Default.WTIP.value" @pressEnter="inpChange" class="text_4"
                    :autofocus="true" />
                <img src="/apoImg/wuxin.png" class="wuxin">
            </div>

            <img src="/apoImg/drop-down.png" class="drop-down">
            <img src="/apoImg/more1.png" class="more1">
        </div>
    </div>
</template>

<script setup lang="ts">

import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits, isReactive, Ref } from 'vue'
import HomeContent from '../../HomeContent';
import { useRouter } from 'vue-router'
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
const router = useRouter()
const state = reactive({
    currentTime: '',
    timer: -1,
});
function currentTime() {
    state.timer = window.setInterval(() => {
        state.currentTime = new Date().toLocaleTimeString()
    }, 1000)
}
function ret() {
    HomeContent.Default.UBANTUVal.value = 0
}
async function retClick() {
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackShowApolloRequest(false))

    // router.go(-1)
    HomeContent.Default.ApoType.value = false
}

async function inpChange() {
    await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.NeolithTrackBrowserRequest(HomeContent.Default.WTIP.value))
    if (HomeContent.Default.WTIP.value == 'http://localhost:8888') {
        HomeContent.Default.InputContent.value = true
    }
}
onMounted(() => {
    clearInterval(state.timer);
    state.timer = -1
    currentTime()
})
</script>

<style scoped>
.hdrBox {
    position: absolute;
    left: 0;
    top: 0;
}

.row_h_1 {
    width: 1920px;
    height: 30px;
    background: linear-gradient(0deg, #393B36, #58574F);
    color: #fff;
    line-height: 30px;
    font-size: 14px;
}

.tim {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.fox_logo_s {
    width: 16px;
    margin-top: -4px;
    margin-right: 6px;
    margin-left: 10px;
}

.text_1 {
    padding: 0 12px;
}

.xll {
    width: 9px;
    margin-left: 12px;
}

.more {
    width: 12px;
    float: right;
    margin-top: 10px;
    margin-right: 16px;
}

.guanbi {
    height: 28px;
    line-height: 28px;
    float: right;
    font-size: 12px;
    margin-right: 8px;
}

.notice {
    width: 17px;
    height: 15px;
    float: right;
    margin-top: 6px;
    margin-right: 12px;
}

.menu_zzjg {
    width: 19px;
    height: 20px;
    float: right;
    margin-top: 4px;
    margin-right: 10px;
}

.row_h_2 {
    width: 1854px;
    height: 40px;
    background: #3B3D35;
    float: right;
}

.TabBox {
    width: 221px;
    height: 36px;
    background: #F3F4F1;
    border-radius: 4px;
    margin: 3px;
    line-height: 36px;
    font-size: 14px;
    font-weight: bold;
    color: #888888;
    float: left;
}

.ic_wq {
    width: 16px;
    height: 16px;
    margin-left: 8px;
    margin-top: -4px;
    margin-right: 6px;
}

.ic_rong {
    width: 10px;
    height: 11px;
    float: right;
    margin-top: 12px;
    margin-right: 12px;
}

.ic_add {
    width: 12px;
    height: 12px;
    margin-top: 14px;
    margin-left: 16px;
}

.close {
    width: 18px;
    height: 18px;
    float: right;
    margin-top: 9px;
    margin-right: 11px;
}

.fangda {
    width: 18px;
    height: 18px;
    float: right;
    margin-top: 9px;
    margin-right: 2px;
}

.suoxiao {
    width: 18px;
    height: 18px;
    float: right;
    margin-top: 9px;
    margin-right: 2px;
}

.row_h_3 {
    width: 1854px;
    float: right;
    height: 42px;
    line-height: 42px;
    background: #F3F4F1;
}

.ic_jianl {
    float: left;
    width: 17px;
    height: 13px;
    margin-top: 15px;
    margin-left: 17px;
}

.ic_jianr {
    float: left;
    width: 17px;
    height: 13px;
    margin-top: 15px;
    margin-left: 19px;
}

.ic_shx {
    float: left;
    width: 15px;
    height: 15px;
    margin-top: 15px;
    margin-left: 20px;
}

.con_box {
    width: 1424px;
    height: 32px;
    background: #FFFFFF;
    border: 1px solid #C9CBC6;
    border-radius: 4px;
    float: left;
    margin-top: 5px;
    margin-left: 127px;
    line-height: 32px;
}

.text_4 {
    width: 80%;
    height: 28px;
    border: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: bold;
    color: #747772;
}

.anquan {
    width: 16px;
    height: 17px;
    float: left;
    margin-top: 7px;
    margin-left: 8px;
    margin-right: 38px;
}

.wuxin {
    width: 18px;
    height: 18px;
    float: right;
    margin-top: 6px;
    margin-right: 8px;
}

.more1 {
    width: 15px;
    height: 14px;
    float: right;
    margin-top: 14px;
    margin-right: 23px;
}

.drop-down {
    float: right;
    width: 12px;
    height: 10px;
    margin-top: 15px;
    margin-right: 20px;
}
</style>